<template>
  <view class="home">
    <image src="/static/images/user/icon_share_bg.png" class="share-bg" mode=""></image>
    <view class="ewm-box">
      <image src="/static/images/user/icon_share_ewm.png" class="icon_ewm" mode=""></image>
      <image
        :src="`https://shop.yikeshun.cn/api/wanlshop/common/qrcode?width=75&page=pages/user/auth/register&sharecode=${shareCode}`"
        class="ewm-img" mode=""></image>
      <view>手机扫描二维码</view>
    </view>
    <view class="share-user">
      <image src="/static/images/user/icon_share_user.png" class="share-img" mode=""></image>
      <image :src="user.avatar" mode="" class="user-avatar"></image>
      <view class="user-info">
        <view>{{user.nickname}}</view>
        <view>推广码：{{user.share_code}}</view>
      </view>
    </view>
    <image src="/static/images/user/icon_share_btn.png" class="share-btn" mode=""></image>
  </view>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        qrcode: '',
        shareCode: ''
      }
    },
    computed: {
      ...mapState(['user'])
    },
    onLoad(options) {
      this.shareCode = options.code
    },
    methods: {

    }
  }
</script>

<style scoped lang="scss">
  .home {
    position: relative;
    z-index: 1;
    padding-top: 226rpx;
  }

  .share-bg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .ewm-box {
    margin: auto;
    padding: 40rpx;
    position: relative;
    width: 656rpx;
    height: 708rpx;
    z-index: 1;
    text-align: center;
    font-size: 32rpx;

    .icon_ewm {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .ewm-img {
      width: 520rpx;
      height: 520rpx;
      margin: 40rpx auto 20rpx;
      display: block;
    }
  }

  .share-user {
    height: 216rpx;
    width: 656rpx;
    position: relative;
    z-index: 1;
    margin: auto;
    padding: 56rpx;

    .share-img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .user-avatar {
      width: 100rpx;
      height: 100rpx;
      background: #D9D9D9;
      border-radius: 12rpx;
    }

    .user-info {
      display: inline-block;
      margin-left: 20rpx;
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
      height: 100rpx;
      vertical-align: top;

      view+view {
        font-weight: 500;
        font-size: 24rpx;
        color: #999999;
        margin-top: 22rpx;
      }
    }
  }

  .share-btn {
    width: 688rpx;
    height: 182rpx;
    display: block;
    margin: auto;
  }
</style>